<template>
  <div class="pet-detail-container">
    <el-card class="detail-card">
      <el-page-header @back="goBack" content="宠物详情"></el-page-header>

      <div class="pet-detail-content">
        <el-row :gutter="30">
          <!-- 左侧图片展示 -->
          <el-col :span="10">
            <div class="image-gallery">
              <img :src="petInfo.mainImage" class="main-image" alt="宠物图片">
              <div class="thumb-images">
                <img v-for="(img, index) in petInfo.images" :key="index"
                     :src="img" class="thumb-image" alt="缩略图">
              </div>
            </div>
          </el-col>

          <!-- 右侧详细信息 -->
          <el-col :span="14">
            <div class="pet-info">
              <h1 class="pet-name">
                {{ petInfo.name }}
                <el-tag :type="getStatusType(petInfo.status)" size="medium">
                  {{ petInfo.status }}
                </el-tag>
              </h1>

              <div class="price-section">
                <span class="label">价格：</span>
                <span class="price">¥{{ petInfo.price }}</span>
              </div>

              <el-divider></el-divider>

              <el-descriptions :column="2" border>
                <el-descriptions-item label="品种">{{ petInfo.breed }}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{ petInfo.age }}个月</el-descriptions-item>
                <el-descriptions-item label="性别">{{ petInfo.gender }}</el-descriptions-item>
                <el-descriptions-item label="颜色">{{ petInfo.color }}</el-descriptions-item>
                <el-descriptions-item label="体重">{{ petInfo.weight }}kg</el-descriptions-item>
                <el-descriptions-item label="疫苗">{{ petInfo.vaccine }}</el-descriptions-item>
                <el-descriptions-item label="来源">{{ petInfo.source }}</el-descriptions-item>
                <el-descriptions-item label="健康状况">
                  <el-tag type="success">{{ petInfo.health }}</el-tag>
                </el-descriptions-item>
              </el-descriptions>

              <el-divider></el-divider>

              <div class="description-section">
                <h3>详细描述</h3>
                <p>{{ petInfo.description }}</p>
              </div>

              <el-divider></el-divider>

              <div class="action-buttons">
                <el-button type="primary" size="large" icon="el-icon-shopping-cart-2"
                           @click="handleBuy" :disabled="petInfo.status !== '可售'">
                  立即购买
                </el-button>
                <el-button type="warning" size="large" icon="el-icon-star-off">
                  收藏
                </el-button>
                <el-button size="large" icon="el-icon-phone">
                  联系客服
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 相关推荐 -->
    <el-card class="recommend-card">
      <div slot="header">
        <span>🔥 相关推荐</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="pet in recommendList" :key="pet.id">
          <el-card :body-style="{ padding: '0px' }" shadow="hover" class="recommend-item">
            <img :src="pet.image" class="recommend-image">
            <div style="padding: 14px;">
              <h4>{{ pet.name }}</h4>
              <div class="recommend-info">
                <span class="price">¥{{ pet.price }}</span>
                <el-button type="text" size="small">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getPetDetail } from '@/api/pet'
import { addFavorite, checkFavorite } from '@/api/favorite'
import { createOrder } from '@/api/order'

export default {
  name: 'PetDetail',
  data () {
    return {
      petInfo: {
        id: 1,
        name: '柯基犬',
        breed: '柯基',
        age: 3,
        gender: '公',
        color: '黄白',
        weight: 12,
        price: 3000,
        status: '可售',
        vaccine: '已接种',
        source: '正规犬舍',
        health: '健康',
        description: '这是一只活泼可爱的柯基犬，性格温顺，亲人友好，已完成基础训练，疫苗齐全，健康保证。适合家庭饲养，是陪伴孩子成长的好伙伴。',
        mainImage: '',
        images: []
      },
      recommendList: []
    }
  },
  created () {
    this.loadPetDetail()
    this.loadRecommend()
  },
  methods: {
    loadPetDetail () {
      const petId = this.$route.query.id
      if (!petId) {
        this.$message.error({ message: '宠物ID不存在', duration: 800 })
        return
      }
      getPetDetail(petId).then(res => {
        if (res && res.data) {
          this.petInfo = {
            id: res.data.id,
            name: res.data.name,
            breed: res.data.breed,
            age: res.data.age,
            gender: res.data.gender,
            color: res.data.color || '',
            weight: res.data.weight || 0,
            price: res.data.price,
            status: res.data.status || '可售',
            vaccine: res.data.vaccine || '',
            source: res.data.source || '',
            health: res.data.health || '健康',
            description: res.data.description || '',
            mainImage: res.data.mainImage || '',
            images: res.data.images || []
          }
        }
      }).catch(err => {
        console.error('加载宠物详情失败：', err)
        this.$message.error({ message: '加载宠物详情失败', duration: 800 })
      })
    },
    loadRecommend () {
      getPetDetail(1).then(res => {
        if (res && res.data && res.data.recommendList) {
          this.recommendList = res.data.recommendList.map(item => ({
            id: item.id,
            name: item.name,
            price: item.price,
            image: item.image || ''
          }))
        }
      }).catch(err => {
        console.error('加载推荐数据失败：', err)
      })
    },
    handleBuy () {
      this.$confirm(`确认购买 ${this.petInfo.name} 吗？`, '确认购买', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        createOrder({
          type: 'pet',
          items: [{
            itemId: this.petInfo.id,
            quantity: 1,
            price: this.petInfo.price
          }]
        }).then(res => {
          this.$message.success({ message: '购买成功！', duration: 800 })
          this.$router.push({ path: '/user/order-detail', query: { id: res.data.id || res.data.orderId } })
        }).catch(err => {
          console.error('购买失败：', err)
          this.$message.error({ message: '购买失败', duration: 800 })
        })
      }).catch(() => {
        this.$message.info({ message: '已取消购买', duration: 800 })
      })
    },
    getStatusType (status) {
      const typeMap = {
        '可售': 'success',
        '已售': 'info',
        '预定': 'warning'
      }
      return typeMap[status] || 'info'
    },
    goBack () {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.pet-detail-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.detail-card {
  margin-bottom: 20px;
}

.pet-detail-content {
  margin-top: 30px;
}

.image-gallery {
  position: sticky;
  top: 20px;
}

.main-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.thumb-images {
  display: flex;
  gap: 10px;
}

.thumb-image {
  width: calc(25% - 7.5px);
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.thumb-image:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

.pet-info {
  padding: 10px;
}

.pet-name {
  font-size: 28px;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.price-section {
  background-color: #fff3f3;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.price-section .label {
  font-size: 16px;
  color: #666;
}

.price {
  font-size: 32px;
  color: #f56c6c;
  font-weight: bold;
}

.description-section h3 {
  margin-bottom: 10px;
  color: #333;
}

.description-section p {
  line-height: 1.8;
  color: #666;
  text-indent: 2em;
}

.action-buttons {
  display: flex;
  gap: 15px;
}

.action-buttons .el-button {
  flex: 1;
}

.recommend-card {
  margin-top: 20px;
}

.recommend-item {
  cursor: pointer;
  transition: all 0.3s;
}

.recommend-item:hover {
  transform: translateY(-5px);
}

.recommend-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.recommend-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
</style>
